import { Link } from "react-router-dom";
import { useAuth } from "@/contexts/authContext.js";
import { motion } from "framer-motion";

export default function Home() {
  const { isAuthenticated } = useAuth();
  
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 flex flex-col items-center justify-center px-4">
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="grid md:grid-cols-2 gap-8">
          {/* 左侧内容 */}
          <div className="p-8 md:p-12 flex flex-col justify-center">
            <motion.h1 
              className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.2 }}
            >
              React管理系统
            </motion.h1>
            <motion.p 
              className="text-lg text-gray-600 dark:text-gray-300 mb-8"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.3 }}
            >
              学习React前端开发的最佳实践，包含增删改查、登录、可视化和权限控制等核心功能。
            </motion.p>
            
            <div className="flex flex-col space-y-4">
              <motion.div
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {isAuthenticated ? (
                  <Link 
                    to="/dashboard" 
                    className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center transition-all"
                  >
                    <i className="fa-solid fa-chart-line mr-2"></i>
                    进入仪表盘
                  </Link>
                ) : (
                  <Link 
                    to="/login" 
                    className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center transition-all"
                  >
                    <i className="fa-solid fa-right-to-bracket mr-2"></i>
                    登录系统
                  </Link>
                )}
              </motion.div>
              
              {isAuthenticated && (
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <Link 
                    to="/users" 
                    className="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center transition-all"
                  >
                    <i className="fa-solid fa-users mr-2"></i>
                    用户管理
                  </Link>
                </motion.div>
              )}
            </div>
          </div>
          
          {/* 右侧图片 */}
          <div className="hidden md:block relative h-full">
            <img 
              src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=React%20admin%20dashboard%20interface%20with%20charts%20and%20data%20visualization&sign=1f28ea5f9d1774a38eca88a9bc2d0ca7" 
              alt="React管理系统界面" 
              className="absolute inset-0 w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-black/30 to-transparent"></div>
          </div>
        </div>
      </motion.div>
      
      {/* 功能介绍 */}
      <div className="mt-16 w-full max-w-6xl">
        <h2 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-12">系统核心功能</h2>
        
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            { 
              icon: 'fa-solid fa-user-shield', 
              title: '用户认证', 
              description: '安全的登录系统和权限控制' 
            },
            { 
              icon: 'fa-solid fa-table-list', 
              title: '增删改查', 
              description: '完整的CRUD操作示例' 
            },
            { 
              icon: 'fa-solid fa-chart-pie', 
              title: '数据可视化', 
              description: '使用Recharts实现图表展示' 
            },
            { 
              icon: 'fa-solid fa-lock', 
              title: '权限管理', 
              description: '基于角色的访问控制' 
            }
          ].map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * index + 0.5 }}
              className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
            >
              <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 rounded-lg flex items-center justify-center mb-4">
                <i className={feature.icon} size={24}></i>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{feature.title}</h3>
              <p className="text-gray-600 dark:text-gray-400">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
      
      {/* 页脚 */}
      <footer className="mt-20 py-6 text-center text-gray-600 dark:text-gray-400">
        <p>© 2025 React学习管理系统 | 为前端开发者打造</p>
      </footer>
    </div>
  );
}